<!--  -->
<template>
  <div class="list" ref="wrapper">
    <div>
      <div>
        <h1>热门城市</h1>
        <ul class="u1">
          <li v-for="item in list.hotCities" :key="item.id">
            {{ item.name }}
          </li>
        </ul>
      </div>
      <div>
        <h1>排序</h1>
        <div v-for="(item, index) of list.cities" :key="item.id" :ref="index">
          <h3>{{ index }}</h3>
          <ul>
            <li v-for="aa in item" :key="aa.id">{{ aa.name }}</li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Bscroll from "better-scroll";

export default {
  props: ["list", "dd"],
  data() {
    return {};
  },
  mounted() {
    this.$nextTick(() => {
        if (!this.scroll) {
    this.scroll = new Bscroll(this.$refs.wrapper);
    console.log(this.scroll);
    }
     })

    // this.scroll = new Bscroll(this.$refs.wrapper,{});
  },
  methods: {
    //     ltt(val) {
    //         if(val){
    //  const res = this.$refs[val][0];
    //             console.log(res);
    //         this.scroll.scrollToElement(res);
    //         console.log(this.scroll);
    //         }
    //     },
  },
  watch: {
    dd() {
      if (this.dd) {
        console.log(this.dd);
        const res = this.$refs[this.dd][0];

        this.scroll.scrollToElement(res);
        // window.scrollTo(0, this.dd.offsetTop + 214)
      }
    },
  },
};
</script>

<style lang="stylus" scoped>
.list {
  height: 300px;
}

.u1 {
  display: flex;

  li {
    margin: 5px;
  }
}
</style>
